<template>
  <form-view class="bbx-cell-form-view" :class="formCellCount > 1 ? 'bbx-cell-form-view-split' : ''" :form-cell-count="formCellCount" :fields="fields" :value="detailData">
    <!-- 客户 S -->
    <template slot="customer" slot-scope="{ field, value }">
      <div class="form-view-row bbx-form-cell-item">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          <span class="link" @click="openCustomerDetailTab(value.id)">{{ (value && value.name) || '' }}</span>
        </div>
      </div>
    </template>
    <!-- 客户 E -->

    <!-- 客户联系人 S -->
    <template slot="linkman" slot-scope="{ field, value }">
      <div class="form-view-row bbx-form-cell-item">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          {{ (value && value.name) || '' }}
        </div>
      </div>
    </template>
    <!-- 客户联系人 E -->

    <!-- 产品 S -->
    <template slot="product" slot-scope="{ field, value }">
      <div class="form-view-row bbx-form-cell-item">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          <span class="link" v-for="(item, index) in value" :key="item.id" @click="openProductDetailTab(item.id)">{{ (index == value.length - 1 && item.name) || item.name + '，' }}</span>
        </div>
      </div>
    </template>
    <!-- 产品 E -->
    
    <!-- 项目类型 S -->
    <template slot="projectType" slot-scope="{ field, value }">
      <div class="form-view-row bbx-form-cell-item">
        <label>{{ field.displayName }}</label>
        <div class="form-view-row-content">
          {{ detailData.templateName }}
        </div>
      </div>
    </template>
    <!-- 项目类型 E -->
  </form-view>
</template>
<script>
import { openCustomerDetailTab, openProductDetailTab } from '@src/modules/projectManage/productTypeUtils/jumpPage.js';

export default {
  name: 'project-type-form-view',
  props: {
    fields: {
      type: Array,
      default: () => [],
    },
    detailData: {
      type: Object,
      default: () => ({}),
    },
    formCellCount: {
      type: Number,
      default: 1,
    },
  },
  setup() {
    return {
      openCustomerDetailTab,
      openProductDetailTab,
    };
  },
};
</script>
<style lang="scss" scoped>
.link {
  cursor: pointer;
  color: $color-primary-light-6;
  &:hover {
    text-decoration: underline;
  }
}
</style>